<template>
  <view class="logistics-page">
    <!-- 派件员信息 -->
    <view class="courier-info">
      <view class="courier-name">快递员: {{ courierName }}</view>
      <view class="courier-phone">手机: {{ courierPhone }}</view>
      <view class="courier-feedback">
        <view class="icon-thumb-up" @tap="likeCourier">👍</view>
        <view class="icon-thumb-down" @tap="dislikeCourier">👎</view>
      </view>
    </view>

    <!-- 物流状态 -->
    <view class="logistics-status">
      <image class="status-image" src="/static/delivery.png" mode="aspectFit" />
      <view class="status-info">
        <view class="status-title">物流状态 {{ deliveryStatus }}</view>
        <view class="status-details">
          <view>承运来源: {{ carrierName }}</view>
          <view>运单号码: {{ trackingNumber }}</view>
          <view>官方电话: {{ carrierPhone }}</view>
        </view>
      </view>
    </view>

    <!-- 物流跟踪 -->
    <view class="tracking-section">
      <view class="tracking-title">物流跟踪</view>
      <view class="tracking-item" v-for="(item, index) in trackingHistory" :key="index">
        <view class="tracking-description">{{ item.description }}</view>
        <view class="tracking-time">{{ item.time }}</view>
      </view>
    </view>

    <!-- 按钮操作 -->
    <view class="action-buttons">
      <button class="action-button">物流投诉</button>
      <button class="action-button">派件评价</button>
    </view>
  </view>
</template>


<script>
	export default {
	  data() {
	    return {
	      courierName: 'xxx',
	      courierPhone: '139xxxxxxxx',
	      deliveryStatus: '已签收',
	      carrierName: '百世快递',
	      trackingNumber: '8902183232982',
	      carrierPhone: '4009-565-656',
	      trackingHistory: [
	        { description: '[北京市] [已签收]，签收人是本人，感谢使用百世快递，期待再次为您服务。', time: '2017-02-08 13:00:48' },
	        { description: '[北京市] [正在派件]，联系电话: xxxxxxxxxx', time: '2017-02-08 13:00:48' },
	        { description: '[北京市] [已签收]，签收人是本人，感谢使用百世快递，期待再次为您服务。', time: '2017-02-08 13:00:48' },
	        { description: '[北京市] [正在派件]，联系电话: xxxxxxxxxx', time: '2017-02-08 13:00:48' }
	      ]
	    };
	  },
	  methods: {
	    likeCourier() {
	      // 点赞派件员逻辑
	      console.log('点赞派件员');
	    },
	    dislikeCourier() {
	      // 差评派件员逻辑
	      console.log('差评派件员');
	    }
	  }
	};
</script>

<style>
.logistics-page {
  padding: 10px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.courier-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.courier-name, .courier-phone {
  font-size: 16px;
  color: #333;
}

.courier-feedback {
  display: flex;
  align-items: center;
}

.icon-thumb-up, .icon-thumb-down {
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}

.logistics-status {
  display: flex;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.status-image {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.status-info {
  flex: 1;
}

.status-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.status-details {
  font-size: 14px;
  color: #666;
}

.tracking-section {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.tracking-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.tracking-item {
  margin-bottom: 10px;
}

.tracking-description {
  font-size: 14px;
  color: #333;
}

.tracking-time {
  font-size: 12px;
  color: #999;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
}

.action-button {
  width: 48%;
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  font-size: 14px;
}
</style>
